@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <style>
        .el-input__inner {
            border-radius: 0;
            border-top-width: 0px;
            border-left-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 2px;
            background: none;
        }

        .el-radio {
            white-space: normal;
        }

        .el-checkbox__label {
            display: inline-grid;
            word-wrap: break-word;
            line-height: 20px;
            white-space: pre-line;
        }

        .number {
            color: red;
        }

        html {
            background-color: #f1f1f1;
        }
    </style>
    <link href="/sitefiles/assets/css/watermark.css" rel="stylesheet" type="text/css" />
}
@await Html.PartialAsync("_PartialWatermark")
<div class="d-flex justify-content-between align-items-center px-3 py-2">
    <span><span class="fw-bold fs-4">{{ title }}</span></span>
    <div>
        共：{{ total }}题，已答：{{ answerTotal }}，正确：<span class="text-success fw-bold">{{ rightTotal }}</span>，错误：<span class="text-danger fw-bold">{{ wrongTotal }}</span>
    </div>
</div>
<div class="p-3">
    <el-card v-if="tm" class="fs-4">
        <div slot="header" class="d-flex justify-content-between align-items-center">
            <div>第<span class="px-1">{{ tmIndex+1 }}</span>题（{{ tm.txName }}）</div>
            <div><span>知识点：{{ tm.zhishidian }}</span></div>
        </div>
        <el-scrollbar class="scrollbar" :style="{ height: ($(window).innerHeight()-305) + 'px' }" ref="answerScrollbar">
            <div class="pe-3">
                <div>
                    <div class="mb-3 fw-bold">
                        <div v-if="tm.baseTx==='Tiankongti'">
                            <span v-if="tm.titleList && tm.titleList.length>0">
                                <span v-for="tmContent in tm.titleList">
                                    <span v-if="utils.contains(tmContent.value,'___')">
                                        <el-input v-model.trim="tm.optionsValues[tmContent.key]" v-on:change="answerChange" style="width:130px;"></el-input>
                                    </span>
                                    <span v-else v-html="tmContent.value"></span>
                                </span>
                            </span>
                            <div v-else v-html="tm.titleHtml"></div>
                        </div>
                        <div v-else v-html="tm.titleHtml"></div>
                    </div>
                    <div class="list-group" v-if="tm.baseTx!=='Tiankongti'">
                        <div v-if="tm.baseTx==='Danxuanti' || tm.baseTx==='Panduanti'">
                            <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                                <div class="d-flex justify-content-start align-items-start">
                                    <div class="me-1 position-relative">
                                        {{optionsABC[optionIndex]}}.
                                    </div>
                                    <div>
                                        <el-radio :label="option.key" v-model="tm.answer" v-on:change="answerChange" size="medium">
                                            <span v-html="option.value"></span>
                                        </el-radio>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="tm.baseTx==='Duoxuanti'">
                            <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                                <div class="d-flex justify-content-start align-items-start">
                                    <div class="me-1 position-relative">
                                        {{optionsABC[optionIndex]}}.
                                    </div>
                                    <div>
                                        <el-checkbox size="medium" :true-label="option.key" false-label="" v-model="tm.optionsValues[optionsABC.indexOf(option.key)]" v-on:change="answerChange">
                                            <span v-html="option.value"></span>
                                        </el-checkbox>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="tm.baseTx==='Jiandati'">
                            <el-input :key="tm.id" type="textarea" resize="none" v-model.trim="tm.answer" :autosize="{ minRows: 3}" maxlength="333" style="width:100%;"
                                      show-word-limit v-on:change="answerChange"></el-input>
                        </div>
                        <div v-else>
                            未知题型
                        </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <div class="pt-3 d-flex justify-content-between align-items-center">
            <div>
                <div v-if="answerResult">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div v-if="answerResult.isRight" class="fs-3">
                                <i class="bi bi-emoji-sunglasses text-success me-3"></i>恭喜你，答对了。
                            </div>
                            <div v-else>
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <el-card>
                                            <div>正确答案：<span class="text-success">{{ answerResult.answer }}</span></div>
                                            <div class="mt-2">
                                                题目解析：<span v-html="answerResult.jiexi"></span>
                                            </div>
                                        </el-card>
                                    </div>
                                    <div class="fs-3 text-danger">
                                        <i class="bi bi-emoji-frown me-3"></i>很遗憾，答错了<i class="el-icon-info ms-1"></i>。
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                        <div>
                            <el-button v-on:click="btnDownClick" type="primary" plain><i class="bi bi-chevron-right me-2"></i>下一题</el-button>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <el-button v-on:click="btnSubmitAnswerClick" type="primary"><i class="bi bi-save me-2"></i>提交答案</el-button>
                </div>
            </div>
            <div class="text-end">
                <el-button v-on:click="btnCollectionRemoveClick" type="danger" plain v-if="tm.isCollection"><i class="bi bi-heartbreak-fill me-2"></i>取消收藏</el-button>
                <el-button v-on:click="btnCollectionClick" type="success" plain v-else><i class="bi bi-suit-heart-fill me-2"></i>收藏</el-button>
                <el-button v-on:click="btnWrongRemoveClick" type="danger" plain v-if="tm.isWrong"><i class="bi bi-sign-turn-slight-left me-2"></i>移出错题库</el-button>
            </div>
        </div>
    </el-card>
    <el-card v-else>
        <div :style="{ height: ($(window).innerHeight()-245) + 'px' }">
            <el-skeleton :rows="6" animated>
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <el-skeleton-item variant="h3" style="width: 50%;" />
            </el-skeleton>
        </div>
    </el-card>
</div>
<div class="d-flex justify-content-between align-items-center px-3 pt-2">
    <div style="min-width:60%;">
        <el-progress :text-inside="true" :stroke-width="20" :percentage="utils.formatPercentFloat(answerTotal,total)" status="success"></el-progress>
    </div>
    <div>
        <el-button class="py-3" v-on:click="btnResultClick" icon="el-icon-close">结束本次练习</el-button>
    </div>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/home/exam/examPracticing.js" type="text/javascript"></script>
}